<template>
	<view class="main">
		<view class="top">
			<view class="top-name"> {{name}}</view>
			<view class="top-c">
				<view class="top-user" @click="openUser">
					<u-icon name="account" color="#276aee" size="33"></u-icon>管理员
				</view>
				<view class="top-user" @click="openCode">
					<u-icon name="scan" color="#276aee" size="33"></u-icon>房车码
				</view>
			</view>
			<view class="top-edit" @click="editRv">
				<u-icon name="edit-pen-fill" color="#fff" size="33"></u-icon>
			</view>
		</view>
		<view class="cont">
			<view class="cont-head">使用记录</view>
			<view class="cont-item" v-for="(i,o) in list" :key="o">
				<view class="cont-item-i">
					<text class="title">姓名</text>
					{{i.userName}}
					<u--text type="error" text="编辑" size="30rpx" align="right"
						@click="$goToPage(`/pagesBusiness/rvManagement/rvEditUsageRecord?id=${i.id}`)"></u--text>
				</view>
				<view class="cont-item-i"><text class="title">联系方式</text>{{i.mobile || '-'}}</view>
				<view class="cont-item-i"><text class="title">入住时间</text>{{i.inTime || '-'}}</view>
				<view class="cont-item-i"><text class="title">离开时间</text>{{i.outTime || '-'}}</view>
				<view class="cont-item-i"><text class="title">价格</text>{{i.price || '-'}}</view>
				<view class="cont-item-i"><text class="title">办理人</text>{{i.handleUser || '-'}}</view>
				<view class="cont-item-i"><text class="title">预约餐厅</text>{{i.diningTime || '-'}}</view>
				<view class="cont-item-i"><text class="title">备注</text>{{i.remark || '-'}}</view>
				<view class="cont-item-i">
					<text class="title">入驻状态</text>
					<!-- 房车状态0未使用 1已入住 2已离开 -->
					<u-tag v-if="i.rvState===0" text="未使用" type="warning"></u-tag>
					<u-tag v-else-if="i.rvState===1" text="已入住" type="success"></u-tag>
					<u-tag v-else-if="i.rvState===2" text="已离开" type="info"></u-tag>
				</view>
			</view>
		</view>


		<u-popup :show="visible" mode="center" round="16rpx" :safeAreaInsetBottom="false" @close="hide">
			<u-image width="280rpx" height="280rpx" radius="14rpx" :src="qrcodeImg">
				<template slot="loading">
					<u-loading-icon></u-loading-icon>
				</template>
			</u-image>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemId: '',
				name: '',
				isAdministrators: '',
				list: [],
				loading: false,
				visible: false,
				qrcodeImg: '',

				refresh: false,
			}
		},
		onLoad(e) {
			this.itemId = e.id
			this.name = e.name
			this.isAdministrators = e.isAdministrators
			this.getList()
		},
		onShow() {
			this.queryById()

			let pages = getCurrentPages(); // 获取当前页面栈
			let curPage = pages[pages.length - 1]; // 当前页面
			if (curPage.refresh) {
				curPage.refresh = false;
				this.getList()
			}
		},
		methods: {
			hide() {
				this.visible = false
			},
			async queryById() {
				let res = await this.$api.queryByIdRv({
					id: this.itemId
				})
				this.name = res.result.rvInfo
			},
			async openCode() {
				// uni.navigateTo({
				// 	url: '/pagesBusiness/rvManagement/rvCode?scene=' + this.itemId
				// })
				this.visible = true
				let params = {
					page: 'pagesBusiness/rvManagement/rvCode',
					scene: this.itemId,
					check_page: false
				}
				this.loading = true
				this.$api.getPhotoUrl(params)
					.then((res) => {
						if (res.success) {
							this.qrcodeImg = res.result
						} else {
							this.visible = false
							uni.$u.toast(res.message)
						}
					}).finally(() => {
						this.loading = false
					})
			},
			async getList() {
				let res = await this.$api.rvApplyRecordList({
					pageNo: 1,
					pageSize: 99999,
					rvId: this.itemId
				})
				this.list = res.result.records
			},
			openUser() {
				uni.navigateTo({
					url: '/pagesBusiness/rvManagement/rvUser?id=' + this.itemId + '&isAdministrators=' + this.isAdministrators
				})
			},
			editRv() {
				uni.navigateTo({
					url: '/pagesBusiness/rvManagement/rvAdd?id=' + this.itemId
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 700rpx;
		margin: 20rpx auto;

		.top {
			background: linear-gradient(45deg, #276aee, #276aee99);
			padding: 20rpx;
			border-radius: 12rpx;
			position: relative;

			.top-name {
				font-weight: bold;
				font-size: 33rpx;
				color: #fff;
				margin-bottom: 20rpx;
			}

			.top-c {
				display: flex;
				align-items: center;
			}

			.top-user {
				padding: 12rpx 0;
				color: #276aee;
				background-color: #fff;
				border-radius: 12rpx;
				box-shadow: 0 0 12rpx #ccc;
				width: 150rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-right: 40rpx;
			}

			.top-edit {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
			}
		}

		.cont {
			margin: 20rpx 0;
			background-color: #fff;
			border-radius: 12rpx;

			.cont-head {
				text-align: center;
				color: #333;
				font-weight: bold;
				font-size: 33rpx;
				margin: 20rpx 0;
				padding: 20rpx 0;
				border-bottom: 1px solid #ccc;
			}

			.cont-item {
				margin: 20rpx 0;
				padding: 20rpx;
				border-bottom: 1px dashed #ddd;

				.cont-item-i {
					padding: 12rpx 0;
					color: #333;
					font-size: 28rpx;

					display: flex;
					align-items: center;
					gap: 10rpx;

					.title {
						width: 150rpx;
						color: #000;
						font-size: 30rpx;
						font-weight: 600;
					}
				}
			}
		}
	}
</style>